<script setup lang="ts">
import { CheckCircleOutlined, CloseCircleOutlined, PlayCircleOutlined, PoweroffOutlined } from '@ant-design/icons-vue'
import { inject } from 'vue'
import type { Node } from '@antv/x6'
import { cutStrByFullLength, getStrFullLength } from '@/utils/util'

defineOptions({
  name: 'CurrentNode',
})

// const getGraph = inject('getGraph')
const getNode = inject('getNode') as any

const shortLabel = ref('') // 短label
const outofLength = ref(false) // 长度是否超长(超长要将label截取并设置tooltip)
const node = ref({
  base: {
    label: '普通任务',
    nodeType: 'start',
    status: 'normal',
  },
})
onMounted(() => {
  const currNode = getNode() as Node
  const data = currNode.data
  Object.assign(node.value.base, data)
  // 监听node数据修改事件，修改节点状态
  currNode.on('change:data', ({ current }) => {
    node.value.base.status = current.status
    node.value.base.label = current.label
    const fullLength = getStrFullLength(current.label)
    outofLength.value = fullLength > 8
    shortLabel.value = cutStrByFullLength(current.label, 8) + (outofLength.value ? '...' : '')
  })
  const fullLength = getStrFullLength(node.value.base.label)
  outofLength.value = fullLength > 8
  shortLabel.value = cutStrByFullLength(node.value.base.label, 8) + (outofLength.value ? '...' : '')
})
function getPopupContainer() {
  return document.getElementById('x6-container') as HTMLElement
}
</script>

<template>
  <div :class="`node ${node.base.status}`">
    <span class="icon">
      <PlayCircleOutlined v-if="node.base.nodeType === 'start'" />
      <CarbonHttp v-if="node.base.nodeType === 'HTTP'" />
      <CarbonFork v-if="node.base.nodeType === 'FORK'" />
      <CarbonJoin v-if="node.base.nodeType === 'JOIN'" />
      <CarbonLoop v-if="node.base.nodeType === 'DO_WHILE'" />
      <PoweroffOutlined v-if="node.base.nodeType === 'finish'" />
      <CarbonDecide v-if="node.base.nodeType === 'SWITCH'" />
      <CarbonTerminate v-if="node.base.nodeType === 'TERMINATE'" />
    </span>
    <a-tooltip v-if="outofLength" :get-popup-container="getPopupContainer">
      <template #title>
        {{ node.base.label }}
      </template>
      <span style="font-size: 12px;">{{ shortLabel }}</span>
    </a-tooltip>
    <span v-if="!outofLength" class="label">{{ node.base.label }}</span>
    <span class="status">
      <CheckCircleOutlined
        v-if="node.base.status === 'success'"
        :class="`icon ${node.base.status}`"
      />
      <CloseCircleOutlined
        v-if="node.base.status === 'failed'"
        :class="`icon ${node.base.status}`"
      />
    </span>
  </div>
</template>

<style scoped>
.node {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 1px solid #c2c8d5;
  border-left: 4px solid #5F95FF;
  border-radius: 4px;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
}
.node .icon {
  /* width: 20px;
  height: 20px;
  flex-shrink: 0; */
  margin-left: 8px;
  /* line-height: 1.7; */
}
.node .label {
  display: inline-block;
  flex-shrink: 0;
  width: 56px;
  margin-left: 8px;
  color: #666;
  font-size: 12px;
}
.node .status {
  flex-shrink: 0;
}
.node.success {
  border-left: 4px solid #52c41a;
}
.node.failed {
  border-left: 4px solid #ff4d4f;
}
.node .icon.success {
   color:#52c41a;
}
.node .icon.failed {
  color:#ff4d4f;
}
.x6-node-selected .node.success {
  border-color: #52c41a;
  border-radius: 2px;
  box-shadow: 0 0 0 4px #ccecc0;
}
.x6-node-selected .node.failed {
  border-color: #ff4d4f;
  border-radius: 2px;
  box-shadow: 0 0 0 4px #fedcdc;
}
[data-theme='dark'] .node {
  background-color: #383838;
  border: 1px solid #808080;
  border-left: 4px solid #5F95FF;
}
[data-theme='dark'] .node.success {
  border-left: 4px solid #52c41a;
}
[data-theme='dark'] .node.failed {
  border-left: 4px solid #ff4d4f;
}
[data-theme='dark'] .x6-node-selected .node.success {
  border-color: #52c41a;
  border-radius: 2px;
  box-shadow: 0 0 0 4px #4c7d3a;
}
[data-theme='dark'] .x6-node-selected .node.failed {
  border-color: #ff4d4f;
  border-radius: 2px;
  box-shadow: 0 0 0 4px #834343;
}
[data-theme='dark'] .label {
  color: #ffffff
}
</style>
